<template>
  <div class="login-wrap">
    <div v-if="isFlag">
      <el-form
        label-position="left"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="0px"
        class="demo-ruleForm login-container"
      >
        <h3 class="title">Gwhale卡-用户注册</h3>
        <!-- <img src="../assets/img/logo.png" /> -->
        <el-form-item prop="username">
          <el-input
            type="text"
            v-model="ruleForm.username"
            auto-complete="off"
            placeholder="用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            auto-complete="off"
            placeholder="密码"
            show-password
          ></el-input>
        </el-form-item>

        <!-- <el-form-item prop="invitationCode">
          <el-input
            type="text"
            v-model="ruleForm.invitationCode"
            auto-complete="off"
            placeholder="邀请码"   
          ></el-input>
        </el-form-item> -->
        <!-- <el-form-item prop="authType" key="authType">
          <el-radio-group v-model="ruleForm.authType" @input="authTypeChange">
            <el-radio label="0">手机号验证</el-radio>
            <el-radio label="2">邮箱验证</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <!-- <el-form-item prop="mobile" v-if="ruleForm.authType == 0">
          <el-input
            v-model="ruleForm.mobile"
            auto-complete="off"
            placeholder="手机号"
          ></el-input>
        </el-form-item>
        <el-row v-if="ruleForm.authType == 0">
          <el-col :span="16">
            <el-form-item prop="code">
              <el-input
                type="text"
                v-model="ruleForm.code"
                auto-complete="off"
                placeholder="短信验证码"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="code-box">
            <el-button @click="getCode()" :disabled="countdown > 0">
              {{ countdown > 0 ? `重新发送(${countdown})` : "获取验证码" }}
            </el-button>
          </el-col>
        </el-row> -->
        <el-form-item prop="email" key="email" v-if="ruleForm.authType == 2">
          <el-input
            v-model="ruleForm.email"
            auto-complete="off"
            placeholder="邮箱"
          ></el-input>
        </el-form-item>
        <el-row v-if="ruleForm.authType == 2">
          <el-col :span="16">
            <el-form-item prop="code" key="code1">
              <el-input
                type="text"
                v-model="ruleForm.code"
                auto-complete="off"
                placeholder="邮箱验证码"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="code-box">
            <el-button @click="getCodeEm()" :disabled="countdown > 0">
              {{ countdown > 0 ? `重新发送(${countdown})` : "获取验证码" }}
            </el-button>
          </el-col>
        </el-row>

        <el-form-item style="width: 100%">
          <el-button
            type="primary"
            style="width: 100%"
            @click="submitForm('ruleForm')"
            :loading="logining"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
      <el-button class="register" type="primary" @click="reg()"
        >立即登录</el-button
      >
    </div>
    <div v-else>
      <img class="registerImg" src="../assets/img/success.png" alt="" />
      <el-button class="register" type="primary" @click="reg()"
        >注册成功，立即登录</el-button
      >
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { phoneReg, emailReg } from "../utils/util";
import { req, reqJson, encrypt, getUrl } from "../api/axiosFun";
const Base64 = require("js-base64").Base64;
export default {
  name: "register",
  data() {
    return {
      //定义loading默认为false
      logining: false,
      isFlag: true,
      countdown: 0,
      ruleForm: {
        invitationCode: "1716",
        username: "",
        password: "",
        code: "",
        mobile: "",
        type: 1,
        authType: "2",
        email: "",
      },
      //rules前端验证
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        // invitationCode: [
        //   { required: true, message: "请输入邀请码", trigger: "blur" },
        // ],
        mobile: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern: phoneReg,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            pattern: emailReg,
            message: "请输入正确的邮箱",
            trigger: "blur",
          },
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
      uuid:''
    };
  },
  created() {},
  // 里面的函数只有调用才会执行
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.logining = true;
          this.ruleForm.invitationCode = this.$route.query.invitationCode ||  '1716'
          let params = JSON.parse(JSON.stringify(this.ruleForm));
          params.password = encrypt(params.password);
          reqJson("post", "/jwt/register", {
            ...params,
            uuid:this.uuid
          },{
            headers: {
              Source:'gwhalepay'
            },

          }).then((res) => {
            this.logining = false;
            console.log(res);
            if (res.code == 0) {
              this.isFlag = false;
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          this.logining = false;
          return false;
        }
      });
    },
    getCode() {
      let myreg = phoneReg;
      // if (!this.ruleForm.mobile || !myreg.test(this.ruleForm.mobile)) {
      //   this.$message.error("请输入有效的手机号");
      //   return;
      // }
      let params = {
        mobile: this.ruleForm.mobile,
        type: 1,
      };
      if (/^1[3-9]/.test(this.ruleForm.mobile)) {
        params.type = 0;
      }
      let url = getUrl(params);
      this.countdown = 60;
      reqJson("post", "/jwt/sms" + url, {}).then((res) => {
        if (res.code == 0) {
          this.$message.success("短信已发送，请注意查收");
          this.uuid = res.data.uuid
          let intervalId = setInterval(() => {
            if (this.countdown > 0) {
              this.countdown--;
            } else {
              clearInterval(intervalId);
            }
          }, 1000);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    getCodeEm() {
      let myreg = emailReg;
      if (!this.ruleForm.email || !myreg.test(this.ruleForm.email)) {
        this.$message.error("请输入有效的邮箱");
        return;
      }
      let params = {
        email: this.ruleForm.email,
      };
      let url = getUrl(params);
      this.countdown = 60;
      reqJson("post", "/jwt/sendEmail" + url, {}).then((res) => {
        if (res.code == 0) {
          this.$message.success("邮件已发送，请注意查收");
          this.uuid = res.data.uuid
          let intervalId = setInterval(() => {
            if (this.countdown > 0) {
              this.countdown--;
            } else {
              clearInterval(intervalId);
            }
          }, 1000);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    reg() {
      this.$router.push({ path: "/login" });
    },
    authTypeChange(e) {
      this.countdown = 0;
      this.ruleForm.mobile = "";
      this.ruleForm.code = "";
      this.ruleForm.email = "";
    },
  },
};
</script>

<style scoped>
.login-wrap {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 5%;
  /* background-image: url(~@/assets/img/login_bg.png); */
  background-image: url(~@/assets/img/login_bg34.png); 
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 100%;
}
.login-container {
  position: absolute;
  top: 300px;
  right: 270px;
  border-radius: 10px;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
  font-size: 26px;
}
.remember {
  margin: 0px 0px 35px 0px;
}
.code-box {
  text-align: right;
}
.register {
  position: absolute;
  left: 402px;
  bottom: 200px;
}
.registerImg {
  position: absolute;
  top: 300px;
  right: 270px;
  width: 300px;
}
</style>